import { LocationFilled } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';
import {defineComponent, ref} from 'vue';
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import AddressItem from "../../components/AddressItem";
import ysmz from "@/assets/images/ysmz.png"
import zywz from "@/assets/images/zywz.png"
import { Steps } from '~/src/components/Steps';
import { KEEP_VIDEO_TOP } from '~/src/config';
import Pagination from "@/components/Pagination";
import zwsj from "@/assets/images/zwsj.png";
import BreadCrumb from "@/components/BreadCrumb";
import {Address} from "cluster";

// 引入Item信息类型定义
interface ItemInfo {
    id: string;
    name: string;
}
export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;

        // 分页组件返回当页数据
        const area = ref<ItemInfo[]>([])
        const handlePageChange = (Datas:any) => {
            area.value = Datas;
        };
        // 定义Item数据列表
        const items = [
            {id: "1", name: "经开区"},
            {id: "2", name: "中原区"},
            {id: "3", name: "二七区"},
            {id: "4", name: "金水区"},
            {id: "5", name: "惠济区"},
            {id: "6", name: "管城回族区"},
            {id: "7", name: "上街区"},
            {id: "8", name: "惠南县"},
            {id: "9", name: "中牟县"},
        ];

        return () => (<>

            <UserInfo></UserInfo>
            <div class={Style.container_mar}>
                <div class={Style.title}>
                    <div>
                        <BreadCrumb />
                    </div>
                </div>

                <div class={Style.container}>
                    {
                        area.value.map(item => (
                            <AddressItem
                                key={item.id}
                                to={'/jdxzAddress'}
                                itemInfo={item}  // 传递完整的item信息
                            >
                                {item.name}
                            </AddressItem>
                        ))

                    }
                </div>
                <Pagination

                    style={{  padding: "0 64px" ,marginBottom:"10px",}}
                    pageSize={20}
                    Data={items}
                    onPageChange={handlePageChange}
                ></Pagination>
            </div>

        </>);
    }
})

